<template>

  <div class="container">
    <NavigationBar :user="user" :showUserMenu="showUserMenu" @go="goTo" @toggleUserMenu="toggleUserMenu"
      @logout="handleLogout" />
    <!-- 主内容区域 -->
    <main class="main-content">
      <router-view></router-view>
      <!-- 卡片网格容器 -->
      <div v-if="$route.path === '/home'" class="layout-controls">
        <button @click="resetLayout" class="reset-layout-btn">恢复默认布局</button>
      </div>
      <div v-if="$route.path === '/home'" class="cards-grid" ref="cardsContainer" @dragover="handleDragOver"
        @drop="handleDrop" @dragleave="handleDragLeave">
        <!-- 固定顶部三卡片：用户信息卡片、倒计时卡片、每日一句卡片 -->
        <div class="card user-info-card" :class="['card', 'user-info-card']" :style="{ gridColumn: 'span 1' }"
          draggable="false" data-card-id="user-info">
          <div class="card-settings" v-if="activeSettings === 'user-info'" @click.stop>
            <button @click="showSizeMenu('user-info')" class="settings-btn">⚙️</button>
            <div v-if="showSizeMenuFor === 'user-info'" class="size-menu">
              <button @click="enterResizeMode('user-info')">调整卡片大小</button>
            </div>
          </div>
          <div class="profile">
            <img :src="user.avatar" alt="头像" class="profile-avatar" />
            <div class="info">
              <h2>{{ greeting }}，{{ user.name }}！</h2>
              <p>学习进度：{{ user.progress }}% | 上次测试：{{ user.lastScore }}分</p>
            </div>
          </div>
          <div class="profile" style="margin: 10px;margin-top: 20px;color: #4a6fa5;margin-left: 30px;">
            无论风暴将你带到什么样的岸边，你都将以主人的身份上岸。</div>
        </div>
        <div class="card countdown-card" :class="['card', 'countdown-card']" :style="{ gridColumn: 'span 1' }"
          draggable="false" data-card-id="countdown">
          <div class="card-settings" v-if="activeSettings === 'countdown'" @click.stop>
            <button @click="showSizeMenu('countdown')" class="settings-btn">⚙️</button>
            <div v-if="showSizeMenuFor === 'countdown'" class="size-menu">
              <button @click="enterResizeMode('countdown')">调整卡片大小</button>
            </div>
          </div>
          <h3>⏰ 考试倒计时</h3>
          <div class="countdown-number">{{ countdown }}</div>
          <p>天后初试</p>
        </div>
        <div class="card quote-card" :class="['card', 'quote-card']" :style="{ gridColumn: 'span 1' }" draggable="false"
          data-card-id="quote">
          <div class="card-settings" v-if="activeSettings === 'quote'" @click.stop>
            <button @click="showSizeMenu('quote')" class="settings-btn">⚙️</button>
            <div v-if="showSizeMenuFor === 'quote'" class="size-menu">
              <button @click="enterResizeMode('quote')">调整卡片大小</button>
            </div>
          </div>
          <h3>🌟 每日一句</h3>
          <blockquote>{{ dailyQuote }}</blockquote>
        </div>

        <!-- 学习统计卡片（固定在每日一句后，且为大号，不可拖动） -->
        <div class="card chart-card card-large" :class="getCardClass('chart')" draggable="false"
          @mouseenter="showSettings('chart')" @mouseleave="hideSettings('chart')" data-card-id="chart">
          <div class="card-settings" v-if="activeSettings === 'chart'" @click.stop>

          </div>
          <h3>📊 学习统计</h3>
          <div ref="chart" class="chart-container"></div>
        </div>

        <!-- 公告卡片（固定在学习统计卡片右边，正常宽度，两行高，不可拖动） -->
        <div class="card notice-card" :class="getCardClass('notice')" style="grid-column: span 1; grid-row: span 2;"
          draggable="false" @mouseenter="showSettings('notice')" @mouseleave="hideSettings('notice')"
          data-card-id="notice">
          <div class="card-settings" v-if="activeSettings === 'notice'" @click.stop>

          </div>
          <h3>📢 系统公告</h3>
          <ul class="notice-list">
            <li style="font-size: 18px;" v-for="(notice, index) in notices" :key="index">
              {{ notice }}
            </li>
          </ul>
        </div>

        <!-- 快速开始卡片 -->
        <div class="card quick-start-card" :class="getCardClass('quick-start')" draggable="true"
          @dragstart="handleDragStart($event, 'quick-start')" @mouseenter="showSettings('quick-start')"
          @mouseleave="hideSettings('quick-start')" data-card-id="quick-start">
          <div class="card-settings" v-if="activeSettings === 'quick-start'" @click.stop>
            <button @click="showSizeMenu('quick-start')" class="settings-btn">⚙️</button>
            <div v-if="showSizeMenuFor === 'quick-start'" class="size-menu">
              <button @click="enterResizeMode('quick-start')">调整卡片大小</button>
            </div>
          </div>
          <h3>🚀 快速开始</h3>
          <div class="quick-actions">
            <button @click="goTo('ExamPageHome')" class="action-btn secondary">开始新的测试</button>
            <button @click="goTo('learning')" class="action-btn primary">开始新的练习</button>
          </div>
        </div>

        <!-- 我的练习卡片 -->
        <div class="card nav-card" :class="getCardClass('practice')" draggable="true"
          @dragstart="handleDragStart($event, 'practice')" @mouseenter="showSettings('practice')"
          @mouseleave="hideSettings('practice')" @click="goToProgressPage()" data-card-id="practice">
          <div class="card-settings" v-if="activeSettings === 'practice'" @click.stop>
            <button @click.stop="showSizeMenu('practice')" class="settings-btn">⚙️</button>
            <div v-if="showSizeMenuFor === 'practice'" class="size-menu">
              <button @click.stop="enterResizeMode('practice')">调整卡片大小</button>
            </div>
          </div>
          <div class="nav-icon">✏️</div>
          <h3>我的练习</h3>
          <p>查看练习记录和进度</p>
        </div>


        <!-- 错题本卡片 -->
        <div class="card nav-card" :class="getCardClass('wrong-questions')" draggable="true"
          @dragstart="handleDragStart($event, 'wrong-questions')" @mouseenter="showSettings('wrong-questions')"
          @mouseleave="hideSettings('wrong-questions')" @click="goTo('wrong-questions')" data-card-id="wrong-questions">
          <div class="card-settings" v-if="activeSettings === 'wrong-questions'" @click.stop>
            <button @click.stop="showSizeMenu('wrong-questions')" class="settings-btn">⚙️</button>
            <div v-if="showSizeMenuFor === 'wrong-questions'" class="size-menu">
              <button @click.stop="enterResizeMode('wrong-questions')">调整卡片大小</button>
            </div>
          </div>
          <div class="nav-icon">📋</div>
          <h3>错题本</h3>
          <p>复习错误题目</p>
        </div>

        <!-- 收藏夹卡片 -->
        <div class="card nav-card" :class="getCardClass('favorites')" draggable="true"
          @dragstart="handleDragStart($event, 'favorites')" @mouseenter="showSettings('favorites')"
          @mouseleave="hideSettings('favorites')" @click="goTo('FavoriteQuestion')" data-card-id="favorites">
          <div class="card-settings" v-if="activeSettings === 'favorites'" @click.stop>
            <button @click.stop="showSizeMenu('favorites')" class="settings-btn">⚙️</button>
            <div v-if="showSizeMenuFor === 'favorites'" class="size-menu">
              <button @click.stop="enterResizeMode('favorites')">调整卡片大小</button>
            </div>
          </div>
          <div class="nav-icon">⭐</div>
          <h3>收藏夹</h3>
          <p>收藏的题目和资料</p>
        </div>


        <!-- 学习计划卡片 -->
        <div class="card nav-card" :class="getCardClass('study-plan')" draggable="true"
          @dragstart="handleDragStart($event, 'study-plan')" @mouseenter="showSettings('study-plan')"
          @mouseleave="hideSettings('study-plan')" @click="goTo('UserCenterGoals')" data-card-id="study-plan">
          <div class="card-settings" v-if="activeSettings === 'study-plan'" @click.stop>
            <button @click.stop="showSizeMenu('study-plan')" class="settings-btn">⚙️</button>
            <div v-if="showSizeMenuFor === 'study-plan'" class="size-menu">
              <button @click.stop="enterResizeMode('study-plan')">调整卡片大小</button>
            </div>
          </div>
          <div class="nav-icon">📅</div>
          <h3>学习计划</h3>
          <p>制定和跟踪学习计划</p>
        </div>

        <!-- 考试记录卡片 -->
        <div class="card nav-card" :class="getCardClass('exam-records')" draggable="true"
          @dragstart="handleDragStart($event, 'exam-records')" @mouseenter="showSettings('exam-records')"
          @mouseleave="hideSettings('exam-records')" @click="goTo('UserCenterTest')" data-card-id="exam-records">
          <div class="card-settings" v-if="activeSettings === 'exam-records'" @click.stop>
            <button @click.stop="showSizeMenu('exam-records')" class="settings-btn">⚙️</button>
            <div v-if="showSizeMenuFor === 'exam-records'" class="size-menu">
              <button @click.stop="enterResizeMode('exam-records')">调整卡片大小</button>
            </div>
          </div>
          <div class="nav-icon">📊</div>
          <h3>考试记录</h3>
          <p>查看历史考试成绩</p>
        </div>

        <!-- 社区讨论卡片 -->
        <div class="card nav-card" :class="getCardClass('discussion')" draggable="true"
          @dragstart="handleDragStart($event, 'discussion')" @mouseenter="showSettings('discussion')"
          @mouseleave="hideSettings('discussion')" @click="goTo('user-communication')" data-card-id="discussion">
          <div class="card-settings" v-if="activeSettings === 'discussion'" @click.stop>
            <button @click.stop="showSizeMenu('discussion')" class="settings-btn">⚙️</button>
            <div v-if="showSizeMenuFor === 'discussion'" class="size-menu">
              <button @click.stop="enterResizeMode('discussion')">调整卡片大小</button>
            </div>
          </div>
          <div class="nav-icon">💬</div>
          <h3>社区讨论</h3>
          <p>与其他考生交流</p>
        </div>

        <!-- 今日推荐卡片 -->
        <div class="card recommendation-card" :class="getCardClass('recommendation')" draggable="true"
          @dragstart="handleDragStart($event, 'recommendation')" @mouseenter="showSettings('recommendation')"
          @mouseleave="hideSettings('recommendation')" data-card-id="recommendation">
          <div class="card-settings" v-if="activeSettings === 'recommendation'" @click.stop>
            <button @click="showSizeMenu('recommendation')" class="settings-btn">⚙️</button>
            <div v-if="showSizeMenuFor === 'recommendation'" class="size-menu">
              <button @click="enterResizeMode('recommendation')">调整卡片大小</button>
            </div>
          </div>
          <h3>📌 今日学习推荐</h3>
          <div class="recommendation-item">
            <p><strong>推荐复习：</strong>计算机网络</p>
            <button @click="goTo('learning', todayTask.knowledge)" class="mini-btn">去复习</button>
          </div>
          <div class="recommendation-item">
            <p><strong>练题建议：</strong>加强操作系统课程练习</p>
            <button @click="goTo('UserLearning', todayTask.practiceType)" class="mini-btn">去练题</button>
          </div>
        </div>

        <!-- 学习统计卡片 -->
        <!-- (原chart-card代码块已移至每日一句后，无需重复) -->

        <!-- 公告卡片 -->
        <!-- (原notice-card代码块已移至学习统计卡片右侧，无需重复) -->

      </div>
    </main>
  </div>
</template>

<script>
import NavigationBar from './NavigationBar.vue'
import * as echarts from 'echarts'
import { useUserStore } from '../../store/UserStore'
import { ref, reactive, onMounted, watch } from 'vue'

export default {
  name: 'UserHome',
  components: { NavigationBar },
  setup() {
    const userStore = useUserStore()
    const user = reactive({
      name: '',
      avatar: '',
      progress: 65,
      lastScore: 92
    })

    // 初始化用户信息
    if (userStore.userInfo) {
      user.name = userStore.userInfo.username || '同学'
      user.avatar = userStore.getAvatar
    }

    // 监听状态机中头像的变化
    watch(() => userStore.getAvatar, (newAvatar) => {
      if (newAvatar) {
        user.avatar = newAvatar
      }
    }, { immediate: true })

    return {
      user,
      userStore
    }
  },
  data() {
    return {
      sizeOptions: [
        { label: '正常 (1×1)', value: { width: 1, height: 1 } },
        { label: '加宽 (1.5×1)', value: { width: 1.5, height: 1 } },
        { label: '宽版 (2×1)', value: { width: 2, height: 1 } },
        { label: '高版 (1×1.5)', value: { width: 1, height: 1.5 } },
        { label: '大版 (2×2)', value: { width: 2, height: 2 } }
      ],
      todayTask: {
        knowledge: '导数应用',
        practice: '5道三角函数题',
        practiceType: 'trigonometry',
        tempCardSize: null, // 添加这个

      },
      countdown: 0,
      notices: [
        '模拟考试入口已开启',
        '新增三角函数题型讲解',
        'GPT智能答疑已上线！',
        '数学一资料更新至2025年',
        '练习功能进度条修复',
        '新增2025热门试卷',


      ],
      dailyQuote: '"路虽远行则将至，事虽难做则必成"',
      showUserMenu: false,
      activeSettings: null,
      showSizeMenuFor: null,
      draggedCard: null,
      cardSizes: {
        'user-info': 'normal',
        'quick-start': 'normal',
        'practice': 'normal',
        'wrong-questions': 'normal',
        'favorites': 'normal',
        'study-plan': 'normal',
        'exam-records': 'normal',
        'discussion': 'normal',
        'recommendation': 'normal',
        'chart': 'normal',
        'countdown': 'normal',
        'notice': 'normal',
        'quote': 'normal'
      },
      resizingCard: null,
      defaultLayout: {
        cardSizes: {
          'user-info': 'normal',
          'quick-start': 'normal',
          'practice': 'normal',
          // ... 其他卡片的默认尺寸
        },
        cardDimensions: {
          'user-info': { width: 1, height: 1 },
          'quick-start': { width: 1, height: 1 },
          // ... 其他卡片的默认尺寸
        }
      },
      minSize: { width: 1, height: 1 },
      maxSize: { width: 3, height: 3 }

    }
  },
  computed: {
    greeting() {
      const hour = new Date().getHours()
      if (hour < 11) return '早上好 ☀️'
      if (hour < 14) return '中午好 🌤️'
      if (hour < 18) return '下午好 🌇'
      return '晚上好 🌙'
    }
  },
  created() {
    // 从状态机获取用户信息
    const userStore = useUserStore()
    if (userStore.userInfo) {
      this.user.name = userStore.userInfo.username || '同学'
      this.user.avatar = this.getAvatarUrl(userStore.userInfo.avatar)
    }
  },
  mounted() {
    this.updateCountdown()
    this.setupScrollAnimation()
    this.drawChart()
    this.loadCardLayout()





    // 点击外部关闭下拉菜单
    document.addEventListener('click', () => {
      this.showUserMenu = false
      this.showSizeMenuFor = null
      this.activeSettings = null
    })
    // 在 mounted() 方法末尾添加
    this.$router.afterEach(() => {
      this.$nextTick(() => {
        this.updateCountdown()
        this.setupScrollAnimation()
        this.drawChart()
        this.loadCardLayout()
      })
    })
  },

  methods: {
    reorderCards(draggedCardId, targetX, targetY) {
      const container = this.$refs.cardsContainer;
      const cards = Array.from(container.children);
      const draggedElement = document.querySelector(`[data-card-id="${draggedCardId}"]`);

      // 获取拖拽元素的原始索引
      const draggedIndex = cards.findIndex(card =>
        card.getAttribute('data-card-id') === draggedCardId
      );

      // 找到鼠标下方的卡片
      let targetCard = null;
      let targetIndex = -1;

      cards.forEach((card, index) => {
        if (card.getAttribute('data-card-id') === draggedCardId) return;

        const rect = card.getBoundingClientRect();
        const containerRect = container.getBoundingClientRect();
        const cardLeft = rect.left - containerRect.left;
        const cardTop = rect.top - containerRect.top;
        const cardRight = cardLeft + rect.width;
        const cardBottom = cardTop + rect.height;

        // 检查鼠标是否在卡片范围内
        if (targetX >= cardLeft && targetX <= cardRight &&
          targetY >= cardTop && targetY <= cardBottom) {
          targetCard = card;
          targetIndex = index;
        }
      });

      // 如果找到目标卡片，根据拖拽方向决定插入位置
      if (targetCard && targetIndex !== -1) {
        if (draggedIndex < targetIndex) {
          // 从前往后拖拽：插入到目标卡片的后面
          const nextSibling = targetCard.nextElementSibling;
          if (nextSibling) {
            container.insertBefore(draggedElement, nextSibling);
          } else {
            // 如果目标卡片是最后一个，直接appendChild
            container.appendChild(draggedElement);
          }
        } else {
          // 从后往前拖拽：插入到目标卡片的前面
          container.insertBefore(draggedElement, targetCard);
        }
      }
    },
    // 恢复默认布局
    resetLayout() {
      this.$confirm('确定要恢复默认布局吗？这将清除所有自定义设置。', '确认操作', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 恢复默认设置
        this.cardSizes = { ...this.defaultLayout.cardSizes }
        this.cardDimensions = { ...this.defaultLayout.cardDimensions }

        // 清除本地存储
        localStorage.removeItem('cardLayout')

        // 重新应用样式
        this.$nextTick(() => {
          this.applyCardLayout()
          this.$message({
            message: '布局已恢复默认设置',
            type: 'success',
            duration: 800,           // 1.5 秒后自动关闭
            onClose: () => {
              window.location.reload()  // 关闭后刷新
            }
          })
        })

      })
    },
    // 应用卡片布局
    applyCardLayout() {
      Object.keys(this.cardDimensions).forEach(cardId => {
        const card = document.querySelector(`[data-card-id="${cardId}"]`)
        if (card) {
          const { width, height } = this.cardDimensions[cardId]
          card.style.gridColumn = `span ${width}`
          card.style.gridRow = `span ${height}`
        }
      })
    },

    goToProgressPage() {
      // 如果处于调整模式，不执行跳转
      if (this.resizingCard) {
        return
      }

      this.$router.push({ name: 'UserCenterProgress' });
    },

    // 在 methods 中修改
    showSizeMenu(cardId) {
      // 切换显示尺寸菜单
      this.showSizeMenuFor = this.showSizeMenuFor === cardId ? null : cardId
      // 阻止事件冒泡
      event.stopPropagation()
    },

    // 新增进入调整模式的方法
    // 修改 enterResizeMode 方法
    enterResizeMode(cardId) {
      this.resizingCard = cardId
      this.showSizeMenuFor = null
      this.activeSettings = null

      // 添加调整模式样式
      document.body.classList.add('resize-mode')

      this.$nextTick(() => {
        const card = document.querySelector(`[data-card-id="${cardId}"]`)
        if (card) {
          card.classList.add('resizing')
          // 只禁用卡片内容的点击，不影响调整手柄
          const cardContent = card.querySelector('.card-content') || card
          if (cardContent !== card) {
            cardContent.style.pointerEvents = 'none'
          }
          this.addResizeHandles(card, cardId)
        }
      })
    },


    beforeRouteEnter(to, from, next) {
      next(vm => {
        vm.$nextTick(() => {
          vm.updateCountdown()
          vm.setupScrollAnimation()
          vm.drawChart()
          vm.loadCardLayout()
        })
      })
    },
    updateCountdown() {
      const today = new Date()
      const examDay = new Date('2025-12-21')
      const diff = Math.ceil((examDay - today) / (1000 * 60 * 60 * 24))
      this.countdown = Math.max(diff, 0)
    },
    setupScrollAnimation() {
      this.$nextTick(() => {
        if (!this.$refs.cardsContainer) return

        const cards = this.$refs.cardsContainer.querySelectorAll('.card')

        // 创建更智能的 Intersection Observer
        const observer = new IntersectionObserver((entries) => {
          entries.forEach((entry) => {
            const card = entry.target
            const rect = card.getBoundingClientRect()
            const windowHeight = window.innerHeight
            const isNearBottom = rect.bottom > windowHeight * 0.5 // 当卡片下边缘超过视口50%时

            // 检查是否是页面底部的卡片
            const isAtPageBottom = (window.innerHeight + window.scrollY) >= (document.documentElement.scrollHeight - 100)

            if (entry.isIntersecting) {
              // 卡片进入视口
              card.classList.add('animate-in')
              card.classList.remove('animate-out')
            } else {
              // 卡片离开视口时的处理逻辑
              if (rect.top < 0) {
                // 卡片从顶部离开视口 - 向上滚动时淡出
                card.classList.remove('animate-in')
                card.classList.add('animate-out')
              } else if (rect.top > windowHeight && !isAtPageBottom) {
                // 卡片从底部离开视口，但不是在页面底部时才淡出
                card.classList.remove('animate-in')
                card.classList.add('animate-out')
              } else if (isAtPageBottom) {
                // 如果在页面底部，保持卡片可见
                card.classList.add('animate-in')
                card.classList.remove('animate-out')
              }
            }
          })
        }, {
          threshold: [0, 0.1, 0.5, 0.9, 1], // 多个阈值以获得更精确的控制
          rootMargin: '40px 0px -10px 0px' // 调整根边距，底部留更多空间
        })

        // 观察所有卡片
        cards.forEach(card => {
          observer.observe(card)
          // 初始状态设置为可见
          card.classList.add('animate-in')
        })

        // 添加滚动监听器以处理页面底部的特殊情况
        const handleScroll = () => {
          const isAtBottom = (window.innerHeight + window.scrollY) >= (document.documentElement.scrollHeight - 50)

          if (isAtBottom) {
            // 当滚动到页面底部时，确保所有可见卡片都不透明
            cards.forEach(card => {
              const rect = card.getBoundingClientRect()
              if (rect.bottom > 0 && rect.top < window.innerHeight) {
                card.classList.add('animate-in')
                card.classList.remove('animate-out')
              }
            })
          }
        }

        // 节流滚动事件
        let scrollTimeout
        window.addEventListener('scroll', () => {
          clearTimeout(scrollTimeout)
          scrollTimeout = setTimeout(handleScroll, 16) // 约60fps
        })

        // 保存清理函数
        this.scrollCleanup = () => {
          observer.disconnect()
          window.removeEventListener('scroll', handleScroll)
        }
      })
    },
    // 6. 修改 beforeUnmount 方法
    beforeUnmount() {
      if (this.scrollCleanup) {
        this.scrollCleanup()
      }

      // 清理图表实例
      if (this.chartInstance) {
        this.chartInstance.dispose()
        this.chartInstance = null
      }

      // 清理resize监听器
      if (this.chartResizeHandler) {
        window.removeEventListener('resize', this.chartResizeHandler)
      }

      document.removeEventListener('click', () => { })
    },
    drawChart() {
      this.$nextTick(() => {
        if (!this.$refs.chart) return

        // 如果已存在图表实例，先销毁
        if (this.chartInstance) {
          this.chartInstance.dispose()
        }

        // 创建新的图表实例
        this.chartInstance = echarts.init(this.$refs.chart)

        const option = {
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '学习次数',
              data: [3, 5, 2, 7, 6, 4, 8],
              type: 'line',
              smooth: true,
              symbol: 'circle',
              symbolSize: 8,
              lineStyle: { color: '#5dade2', width: 3 },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(93, 173, 226, 0.3)' },
                  { offset: 1, color: 'rgba(93, 173, 226, 0.05)' }
                ])
              }
            }
          ]
        }

        this.chartInstance.setOption(option)

        // 添加窗口resize监听
        const resizeHandler = () => {
          if (this.chartInstance) {
            this.chartInstance.resize()
          }
        }

        window.addEventListener('resize', resizeHandler)
        this.chartResizeHandler = resizeHandler
      })
    },
    toggleUserMenu(event) {
      if (event) {
        event.stopPropagation() // 阻止事件冒泡
      }
      this.showUserMenu = !this.showUserMenu
    },
    handleLogout() {
      localStorage.removeItem('user-token')
      localStorage.removeItem('userInfo')
      this.$router.push({ path: '/login' })
      this.$message.success('已安全退出登录')
      console.log('退出登录')
    },
    showSettings(cardId) {
      this.activeSettings = cardId
    },
    hideSettings(cardId) {
      if (this.showSizeMenuFor !== cardId) {
        this.activeSettings = null
      }
    },

    setCardSize(cardId, size) {
      this.cardSizes[cardId] = size
      this.showSizeMenuFor = null
      this.activeSettings = null
      this.saveCardLayout()

      // 如果是图表卡片，需要重新调整图表大小
      if (cardId === 'chart') {
        // 使用延时确保DOM更新完成
        setTimeout(() => {
          this.resizeChart()
        }, 350) // 稍微增加延时，确保CSS动画完成
      }
    },
    // 4. 添加专门的图表调整方法
    resizeChart() {
      if (this.chartInstance && this.$refs.chart) {
        // 强制重新计算容器大小
        this.chartInstance.resize({
          animation: {
            duration: 300,
            easing: 'cubicOut'
          }
        })
      }
    },
    // 5. 添加观察器监听卡片大小变化
    watch: {
      cardSizes: {
        handler(newSizes, oldSizes) {
          // 检查图表卡片是否发生大小变化
          if (newSizes.chart !== oldSizes.chart) {
            this.$nextTick(() => {
              setTimeout(() => {
                this.resizeChart()
              }, 300)
            })
          }
        },
        deep: true
      }
    },
    getCardClass(cardId) {
      return {
        'card-large': this.cardSizes[cardId] === 'large',
        'card-tall': this.cardSizes[cardId] === 'tall'
      }
    },
    handleDragStart(event, cardId) {
      this.draggedCard = cardId
      event.dataTransfer.effectAllowed = 'move'



      // 添加拖拽状态类
      event.target.classList.add('dragging')
      event.dataTransfer.setDragImage(dragImage, 0, 0)

      // 延迟移除代理元素
      setTimeout(() => document.body.removeChild(dragImage), 0)

      // 原元素半透明
      event.target.style.opacity = '0.9'
      event.target.style.transform = 'scale(0.95)'
    },
    handleDragOver(event) {
      event.preventDefault()
      event.dataTransfer.dropEffect = 'move'

      const container = this.$refs.cardsContainer
      const rect = container.getBoundingClientRect()

      // 使用节流优化性能
      if (this.dragOverTimeout) return
      this.dragOverTimeout = setTimeout(() => {
        this.dragOverTimeout = null

        const x = event.clientX - rect.left
        const y = event.clientY - rect.top

        this.updateDropIndicator(x, y, container)
      }, 16) // 60fps
    },
    handleDragLeave(event) {
      // 只有当鼠标真正离开容器时才清除指示器
      if (!this.$refs.cardsContainer.contains(event.relatedTarget)) {
        const existingIndicator = this.$refs.cardsContainer.querySelector('.drop-indicator')
        if (existingIndicator) {
          existingIndicator.remove()
        }
      }
    },
    handleDrop(event) {
      event.preventDefault()

      const draggedElement = document.querySelector(`[data-card-id="${this.draggedCard}"]`)

      // 恢复拖拽元素样式
      draggedElement.style.opacity = '1'
      draggedElement.style.transform = 'scale(1)'

      // 清除拖拽指示器
      const existingIndicator = this.$refs.cardsContainer.querySelector('.drop-indicator')
      if (existingIndicator) {
        existingIndicator.remove()
      }

      // 获取放置位置相对于容器的坐标
      const rect = this.$refs.cardsContainer.getBoundingClientRect()
      const targetX = event.clientX - rect.left
      const targetY = event.clientY - rect.top

      // 重新排列DOM顺序
      this.reorderCards(this.draggedCard, targetX, targetY)
      this.saveCardLayout()
      this.draggedCard = null
    },
    // 修改 saveCardLayout 方法
    saveCardLayout() {
      const layout = {
        sizes: this.cardSizes,
        dimensions: this.cardDimensions, // 保存详细尺寸
        order: Array.from(this.$refs.cardsContainer?.children || []).map(card =>
          card.getAttribute('data-card-id')
        ).filter(id => id)
      }
      localStorage.setItem('cardLayout', JSON.stringify(layout))
    },

    // 修改 loadCardLayout 方法
    loadCardLayout() {
      const saved = localStorage.getItem('cardLayout')
      if (saved) {
        const layout = JSON.parse(saved)
        this.cardSizes = { ...this.cardSizes, ...layout.sizes }
        this.cardDimensions = { ...this.cardDimensions, ...layout.dimensions }
        this.$nextTick(() => {
          this.applyCardLayout()
        })
      }
    },
    goTo(page, param = '') {
      // 如果处于调整模式，不执行跳转
      if (this.resizingCard) {
        return
      }

      if (page === 'wrong-questions') {
        this.$router.push({ name: 'WrongQuestions' })
      } else if (page === 'learning') {
        this.$router.push({ path: '/home/learning' })
      } else if (page === 'practice') {
        this.$router.push({ path: '/practice', query: { type: param } })
      } else if (page === 'user-center') {
        this.$router.push('/home/user-center')
      } else if (page === 'user-home') {
        this.$router.push('/home')
      } else if (page === 'user-learing') {
        this.$router.push('/home')
      } else if (page === 'user-communication') {
        this.$router.push({ name: 'UserCommunication' })
      } else {
        this.$router.push({ name: page })
      }
    },
    // 处理头像路径
    getAvatarUrl(avatar) {
      try {
        if (!avatar) {
          return '/images/default-avatar.png'
        }

        // 如果头像路径是完整的URL，直接返回
        if (avatar.startsWith('http://') || avatar.startsWith('https://')) {
          return avatar
        }

        // 如果是本地头像，使用相对路径
        const cleanAvatar = avatar.startsWith('/') ? avatar.substring(1) : avatar

        // 检查文件格式
        const supportedFormats = ['.jpg', '.jpeg', '.png', '.gif']
        const hasValidExtension = supportedFormats.some(format =>
          cleanAvatar.toLowerCase().endsWith(format)
        )

        // 如果路径已经包含 avatars 目录
        if (cleanAvatar.startsWith('avatars/')) {
          return `/${cleanAvatar}`
        }

        // 如果没有有效的文件扩展名，添加默认扩展名
        const avatarWithExtension = hasValidExtension ? cleanAvatar : `${cleanAvatar}.jpg`
        return `/avatars/${avatarWithExtension}`
      } catch (error) {
        console.error('处理头像路径时出错:', error)
        return '/images/default-avatar.png'
      }
    },
    // 新增方法：添加调整手柄
    addResizeHandles(card, cardId) {
      // 移除现有手柄
      this.removeResizeHandles(card)
      // 确保 card 是相对定位
      card.style.position = 'relative'

      // 创建四条边的中点拖拽点
      const handles = [
        { class: 'resize-n', cursor: 'n-resize', style: 'top: -9px; left: 50%; transform: translateX(-50%);' },
        { class: 'resize-s', cursor: 's-resize', style: 'bottom: -9px; left: 50%; transform: translateX(-50%);' },
        { class: 'resize-w', cursor: 'w-resize', style: 'left: -9px; top: 50%; transform: translateY(-50%);' },
        { class: 'resize-e', cursor: 'e-resize', style: 'right: -9px; top: 50%; transform: translateY(-50%);' }
      ]

      handles.forEach(handle => {
        const handleEl = document.createElement('div')
        handleEl.className = `resize-handle ${handle.class}`
        handleEl.style.cssText = handle.style + `cursor: ${handle.cursor}; 
    position: absolute; width: 18px; height: 18px; background: #007bff; border: 2px solid white; border-radius: 50%; z-index: 1001;padding: 10px; /* 扩大点击区域 */`

        handleEl.addEventListener('mousedown', (e) => {
          e.preventDefault()
          e.stopPropagation()
          this.startResize(e, cardId, handle.class.replace('resize-', ''))
        })

        card.appendChild(handleEl)
      })

      // 添加控制按钮
      // 添加控制按钮
      const controls = document.createElement('div')
      controls.className = 'resize-controls'
      controls.innerHTML = `
  <button class="resize-confirm" title="确认">✓</button>
  <button class="resize-cancel" title="取消">✕</button>
`


      // 绑定按钮事件 - 重点：阻止事件冒泡
      const confirmBtn = controls.querySelector('.resize-confirm')
      const cancelBtn = controls.querySelector('.resize-cancel')

      confirmBtn.addEventListener('click', (e) => {
        e.preventDefault()
        e.stopPropagation()
        e.stopImmediatePropagation()
        this.confirmResize(cardId)
      })

      cancelBtn.addEventListener('click', (e) => {
        e.preventDefault()
        e.stopPropagation()
        e.stopImmediatePropagation()
        this.cancelResize(cardId)
      })

      // 为控制按钮容器也添加事件阻止
      controls.addEventListener('click', (e) => {
        e.preventDefault()
        e.stopPropagation()
        e.stopImmediatePropagation()
      })

      card.appendChild(controls)
    },

    startResize(event, cardId, direction) {
      const card = document.querySelector(`[data-card-id="${cardId}"]`)
      const gridContainer = this.$refs.cardsContainer
      const gridStyle = window.getComputedStyle(gridContainer)

      // 获取网格基本单位
      const gridGap = parseInt(gridStyle.gap) || 20
      const baseWidth = 200  // 基础宽度
      const baseHeight = 200 // 基础高度

      let currentCols = this.cardDimensions[cardId]?.width || 1
      let currentRows = this.cardDimensions[cardId]?.height || 1

      const startX = event.clientX
      const startY = event.clientY

      const handleMouseMove = (e) => {
        const deltaX = e.clientX - startX
        const deltaY = e.clientY - startY

        let newCols = currentCols
        let newRows = currentRows

        // 按0.5倍数调整，每移动100px = 0.5个网格单位
        switch (direction) {
          case 'e': // 右边
            newCols = Math.max(1, currentCols + Math.round(deltaX / (baseWidth * 0.5)) * 0.5)
            break
          case 'w': // 左边  
            newCols = Math.max(1, currentCols - Math.round(deltaX / (baseWidth * 0.5)) * 0.5)
            break
          case 's': // 下边
            newRows = Math.max(1, currentRows + Math.round(deltaY / (baseHeight * 0.5)) * 0.5)
            break
          case 'n': // 上边
            newRows = Math.max(1, currentRows - Math.round(deltaY / (baseHeight * 0.5)) * 0.5)
            break
        }

        // 限制最大尺寸
        newCols = Math.min(newCols, 3)
        newRows = Math.min(newRows, 3)

        // 应用新尺寸
        card.style.gridColumn = `span ${newCols}`
        card.style.gridRow = `span ${newRows}`

        // 保存临时尺寸
        this.tempCardSize = { width: newCols, height: newRows }

        // 实时更新视觉反馈
        card.style.transition = 'none'
      }
      const handleMouseUp = () => {
        document.removeEventListener('mousemove', handleMouseMove)
        document.removeEventListener('mouseup', handleMouseUp)
        document.body.style.userSelect = ''
      }

      // 禁用文本选择
      document.body.style.userSelect = 'none'

      document.addEventListener('mousemove', handleMouseMove)
      document.addEventListener('mouseup', handleMouseUp)
    },

    removeResizeHandles(card) {
      const handles = card.querySelectorAll('.resize-handle, .resize-controls')
      handles.forEach(handle => handle.remove())
    },

    confirmResize(cardId) {
      // 保存新尺寸
      if (this.tempCardSize) {
        this.cardDimensions[cardId] = { ...this.tempCardSize }
      }
      this.exitResizeMode(cardId)
      this.saveCardLayout()
    },

    cancelResize(cardId) {
      // 恢复原始尺寸
      const card = document.querySelector(`[data-card-id="${cardId}"]`)
      if (card) {
        card.style.gridColumn = ''
        card.style.gridRow = ''
        card.style.width = ''
        card.style.height = ''
      }
      this.exitResizeMode(cardId)
    },

    // 修改 exitResizeMode 方法  
    exitResizeMode(cardId) {
      const card = document.querySelector(`[data-card-id="${cardId}"]`)
      if (card) {
        card.classList.remove('resizing')
        // 恢复卡片内容的点击事件
        const cardContent = card.querySelector('.card-content') || card
        if (cardContent !== card) {
          cardContent.style.pointerEvents = ''
        }
        this.removeResizeHandles(card)
      }
      document.body.classList.remove('resize-mode')
      this.resizingCard = null
      this.tempCardSize = null
    }

  }

}
</script>


<style scoped>
/* 添加布局控制按钮样式 */
.layout-controls {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 100;
}

.reset-layout-btn {
  padding: 8px 16px;
  background: #6c757d;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.reset-layout-btn:hover {
  background: #5a6268;
}

/* 修改调整模式样式 */

.resize-mode .card:not(.resizing) {
  pointer-events: none;
  opacity: 0.5;
}

.card.resizing {
  pointer-events: all;
  z-index: 1000;
  position: relative;
}

/* 调整模式下禁用卡片内容的所有交互 */
.card.resizing>*:not(.resize-handle):not(.resize-controls) {
  pointer-events: none !important;
}

/* 调整控制按钮位置 - 悬浮在内容上方 */
.resize-controls {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  gap: 4px;
  z-index: 1002;
}


.resize-controls * {
  pointer-events: auto !important;
}

.resize-confirm,
.resize-cancel {
  pointer-events: auto !important;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.resize-mode {
  pointer-events: none;
}

.card.resizing {
  pointer-events: all;
  z-index: 1000;
  position: relative;
  border: 2px dashed #007bff !important;
  box-shadow: 0 4px 20px rgba(0, 123, 255, 0.3) !important;
}

.resize-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #007bff;
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.resize-nw {
  top: -6px;
  left: -6px;
}

.resize-ne {
  top: -6px;
  right: -6px;
}

.resize-sw {
  bottom: -6px;
  left: -6px;
}

.resize-se {
  bottom: -6px;
  right: -6px;
}



.resize-confirm,
.resize-cancel {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.resize-confirm {
  background: #28a745;
  color: white;
}

.resize-cancel {
  background: #dc3545;
  color: white;
}

.size-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.size-menu button {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}

.size-menu button:hover {
  background: #f5f5f5;
}


/* 调整模式遮罩 */
body.resize-mode::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 999;
}

/* 调整状态的卡片 */
.card.resizing {
  z-index: 1000;
  position: relative;
  box-shadow: 0 20px 60px rgba(107, 155, 210, 0.4);
  border: 2px solid #6b9bd2;
}

/* 调整手柄样式 */
.resize-handle {
  pointer-events: auto !important;
  position: absolute;
  background: #6b9bd2;
  border: 2px solid white;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  cursor: pointer;
  z-index: 1001;
}

.resize-nw {
  top: -6px;
  left: -6px;
  cursor: nw-resize;
}

.resize-ne {
  top: -6px;
  right: -6px;
  cursor: ne-resize;
}

.resize-sw {
  bottom: -6px;
  left: -6px;
  cursor: sw-resize;
}

.resize-se {
  bottom: -6px;
  right: -6px;
  cursor: se-resize;
}

.resize-n {
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  cursor: n-resize;
}

.resize-s {
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  cursor: s-resize;
}

.resize-e {
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  cursor: e-resize;
}

.resize-w {
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  cursor: w-resize;
}



.resize-confirm,
.resize-cancel {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-weight: bold;
}

.resize-confirm {
  background: #4caf50;
  color: white;
}

.resize-cancel {
  background: #f44336;
  color: white;
}

/* 全局去除点击焦点边框（慎用，可能影响无障碍访问） */
*:focus {
  outline: none;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  height: auto;

}

/* 主容器样式修复 */
.container {
  min-width: 100%;
  min-height: 100vh;
  /* 确保背景覆盖整个视口 */
  height: auto;
  background: linear-gradient(135deg, #f8fbff 0%, #f1f7ff 100%);
  /* 修复背景附加方式 */
  background-attachment: scroll;
  /* 改为scroll */
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* 确保背景完全覆盖 */
  font-family: 'Helvetica Neue', 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  /* 确保内容足够高时背景延续 */
  position: relative;
}




/* 顶部导航栏 */
.top-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 70px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(107, 155, 210, 0.1);
  z-index: 1000;
  transition: all 0.3s ease;
}

.nav-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 30px;
}

.logo {
  font-size: 1.4rem;
  font-weight: 600;
  color: #4a6fa5;
  margin: 0;
}

.nav-menu {
  display: flex;
  gap: 30px;
}

.nav-item {
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #4a6fa5;
  font-weight: 500;
}

.nav-item:hover {
  background: rgba(107, 155, 210, 0.1);
  transform: translateY(-2px);
}

.user-capsule {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: rgba(107, 155, 210, 0.1);
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1000;
}

.user-capsule:hover {
  background: rgba(107, 155, 210, 0.2);
  transform: translateY(-1px);
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.username {
  font-weight: 500;
  color: #4a6fa5;
}

.user-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 5px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(107, 155, 210, 0.2);
  overflow: hidden;
  min-width: 150px;
  z-index: 1001;
  /* 确保层级足够高 */
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.dropdown-item:hover {
  background: rgba(100, 135, 185, 0.1);
  color: #4a6fa5;
}

.dropdown-item .icon {
  font-size: 16px;
}

/* 主内容区域样式调整 */
.main-content {
  padding-top: 100px;
  padding-bottom: 50px;
  /* 确保内容区域有足够的高度 */
  min-height: calc(100vh - 70px);
  /* 减去导航栏高度 */
  position: relative;
  z-index: 1;
}

/* 卡片网格容器调整 */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 25px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 30px;
  grid-auto-flow: dense;
  /* 确保网格有足够的最小高度 */
  min-height: 500px;


  grid-auto-rows: 200px;
  grid-auto-flow: row dense;
  /* 关键：允许后面的卡片填充前面的空隙 */

}

/* 滚动动画关键帧 */
@keyframes slide-fade-in {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes slide-fade-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0.3;
    /* 不完全透明，避免完全消失 */
    transform: translateY(-20px) scale(0.98);
  }
}

/* 卡片基础样式 */
.card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 25px;
  border: 1px solid rgba(100, 135, 185, 0.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  cursor: grab;

  /* 滚动触发动画 */
  animation: slide-fade-in 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
  animation-timeline: view();
  animation-range: contain 0% contain 40%;

  /* 默认可见状态 */
  opacity: 1;
  transform: translateY(0) scale(1);
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #6b9bd2, #8bb6e8, #a8c5e8);
  transform: scaleX(0);
  transition: transform 0.4s ease;
}

.card:hover::before {
  transform: scaleX(1);
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(100, 135, 185, 0.25);
  border-color: rgba(100, 135, 185, 0.2);
}

.card:active {
  cursor: grabbing;
  transform: translateY(-8px) scale(1.02);
}

/* 卡片设置按钮 */
.card-settings {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 10;
}

.settings-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(100, 135, 185, 0.1);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.settings-btn:hover {
  background: rgba(100, 135, 185, 0.2);
  transform: rotate(90deg);
}

.size-menu {
  position: absolute;
  top: 40px;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 10px;
  box-shadow: 0 8px 25px rgba(100, 135, 185, 0.2);
  overflow: hidden;
  min-width: 100px;
  border: 1px solid rgba(100, 135, 185, 0.1);
}

.size-menu button {
  display: block;
  width: 100%;
  padding: 10px 15px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.2s ease;
  color: #5a7ba8;
  font-size: 13px;
}

.size-menu button:hover {
  background: rgba(100, 135, 185, 0.1);
}

/* 卡片尺寸变体 */
.card-large {
  grid-column: span 2;
  grid-row: span 2;
}

.card-tall {
  grid-column: span 1;
  grid-row: span 2;
}

.card-extra-large {
  grid-column: span 2;
  grid-row: span 2;
}

/* 特定卡片样式 */
.user-info-card {
  background: linear-gradient(135deg, rgba(107, 155, 210, 0.1), rgba(168, 197, 232, 0.1));
  border: 1px solid rgba(107, 155, 210, 0.15);
}

.profile {
  display: flex;
  align-items: center;
  gap: 20px;
}

.profile-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(107, 155, 210, 0.2);
}

.info h2 {
  color: #4a6fa5;
  font-size: 1.3rem;
  margin-bottom: 8px;
  font-weight: 600;
}

.info p {
  color: #6b8bb0;
  font-size: 0.9rem;
}

.quick-start-card {
  background: linear-gradient(135deg, rgba(106, 168, 79, 0.1), rgba(139, 195, 74, 0.1));
  border: 1px solid rgba(106, 168, 79, 0.15);
}

.quick-start-card h3 {
  color: #4a6fa5;
  margin-bottom: 20px;
  font-size: 1.2rem;
}

.quick-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.action-btn {
  padding: 12px 20px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
  font-size: 0.9rem;
}

.action-btn.primary {
  background: linear-gradient(135deg, #6b9bd2, #8bb6e8);
  color: white;
}

.action-btn.primary:hover {
  background: linear-gradient(135deg, #5a8bc1, #7aa5d7);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(107, 155, 210, 0.3);
}

.action-btn.secondary {
  background: rgba(107, 155, 210, 0.1);
  color: #4a6fa5;
  border: 1px solid rgba(107, 155, 210, 0.2);
}

.action-btn.secondary:hover {
  background: rgba(107, 155, 210, 0.2);
  transform: translateY(-2px);
}

.nav-card {
  text-align: center;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.nav-card:hover {
  background: linear-gradient(135deg, rgba(107, 155, 210, 0.08), rgba(168, 197, 232, 0.08));
}

.nav-icon {
  font-size: 2.5rem;
  margin-bottom: 15px;
  transition: all 0.3s ease;
}

.nav-card:hover .nav-icon {
  transform: scale(1.1) rotate(5deg);
}

.nav-card h3 {
  color: #4a6fa5;
  margin-bottom: 10px;
  font-size: 1.1rem;
}

.nav-card p {
  color: #6b8bb0;
  font-size: 0.85rem;
}

.recommendation-card {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(255, 213, 79, 0.1));
  border: 1px solid rgba(255, 193, 7, 0.2);
}

.recommendation-card h3 {
  color: #4a6fa5;
  margin-bottom: 20px;
  font-size: 1.1rem;
}

.recommendation-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
}

.recommendation-item p {
  color: #5a7ba8;
  font-size: 0.85rem;
  margin: 0;
}

.mini-btn {
  padding: 6px 12px;
  background: linear-gradient(135deg, #6b9bd2, #8bb6e8);
  color: white;
  border: none;
  border-radius: 15px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.mini-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(107, 155, 210, 0.3);
}

.chart-card h3 {
  color: #4a6fa5;

  font-size: 1.1rem;
}

.chart-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.chart-card.card-large {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 替换原有的图表容器样式 */
.chart-container {
  height: 200px;
  width: 100%;
  min-height: 180px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

/* 大卡片时的图表样式 */
.card-large .chart-container {
  height: 400px;
  min-height: 350px;
}


.countdown-card {
  text-align: center;
  background: linear-gradient(135deg, rgba(244, 67, 54, 0.1), rgba(255, 112, 67, 0.1));
  border: 1px solid rgba(244, 67, 54, 0.15);
}

.countdown-card h3 {
  color: #4a6fa5;
  margin-bottom: 15px;
  font-size: 1.1rem;
}

.countdown-number {
  font-size: 3rem;
  font-weight: bold;
  color: #e57373;
  margin: 10px 0;
  text-shadow: 0 2px 4px rgba(229, 115, 115, 0.3);
}

.countdown-card p {
  color: #6b8bb0;
  font-size: 0.9rem;
}

.notice-card h3 {
  color: #4a6fa5;
  margin-bottom: 15px;
  font-size: 1.1rem;
}

.notice-list {
  list-style: none;
  padding: 0;
}

.notice-list li {
  padding: 8px 12px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  color: #5a7ba8;
  font-size: 0.85rem;
  border-left: 3px solid rgba(107, 155, 210, 0.3);
  transition: all 0.3s ease;
}

.notice-list li:hover {
  background: rgba(255, 255, 255, 0.8);
  border-left-color: rgba(107, 155, 210, 0.6);
  transform: translateX(5px);
}

.quote-card {
  text-align: center;
  background: linear-gradient(135deg, rgba(156, 39, 176, 0.1), rgba(186, 104, 200, 0.1));
  border: 1px solid rgba(156, 39, 176, 0.15);
}

.quote-card h3 {
  color: #4a6fa5;
  margin-bottom: 20px;
  font-size: 1.1rem;
}

.quote-card blockquote {
  font-size: 1rem;
  font-style: italic;
  color: #5a7ba8;
  line-height: 1.6;
  position: relative;
  padding: 0 20px;
}

.quote-card blockquote::before,
.quote-card blockquote::after {
  content: '"';
  font-size: 2rem;
  color: rgba(107, 155, 210, 0.3);
  position: absolute;
  top: -10px;
}

.quote-card blockquote::before {
  left: 0;
}

.quote-card blockquote::after {
  right: 0;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .cards-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    padding: 0 20px;
  }
}

@media (max-width: 768px) {
  .nav-content {
    padding: 0 20px;
  }

  .nav-menu {
    display: none;
  }



  .card-large {
    grid-column: span 1;
    grid-row: span 1;
  }

  .main-content {
    padding-top: 80px;
  }
}

/* 拖拽状态 */
.card.dragging {
  opacity: 0.5;
  transform: rotate(5deg) scale(1.05);
  z-index: 1000;
}

.cards-grid.drag-over {
  background: rgba(107, 155, 210, 0.05);
  border-radius: 15px;
}

/* 动画增强 */
.animate-in {
  animation-play-state: running;
}

.animate-out {
  animation: slide-fade-out 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* 动画类 */
.animate-in {
  animation: slide-fade-in 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.animate-out {
  animation: slide-fade-out 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* 强制底部卡片保持可见 */
.card.keep-visible {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  animation: none !important;
}

/* 页面底部检测类 */
.at-page-bottom .card {
  opacity: 1;
  transform: translateY(0) scale(1);
}


/* 媒体查询 - 移动端优化 */
@media (max-width: 768px) {
  .animate-in {
    animation-duration: 0.4s;
    /* 移动端更快的动画 */
  }

  .animate-out {
    animation-duration: 0.3s;
  }
}
</style>